<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>咕咕米后台登陆</title>
    <link rel="stylesheet" href="./vendors/layui-v2.4.5/css/layui.css" />
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>
    <div id="login">
        <div id="top">
            <h1>后台登陆</h1>
            <p class="sub">北京地区最具影响力的 Web 制作团队</p>
        </div>

        <form action="" class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <input type="text" class="layui-input" autocomplete="off" placeholder="用户名" name="username">
            </div>

            <div class="layui-form-item">
                <input type="text" class="layui-input" autocomplete="off" placeholder="密码" name="password">
            </div>

            <div class="layui-form-item">
                <a id="submit" href="javascript:void(0)" class="layui-btn layui-btn-normal layui-btn-fluid">登陆</a>
            </div>
        </form>
    </div>
</body>
<script src="./vendors/layui-v2.4.5/layui.all.js"></script>
<script>
    layui.use(['jquery'], function () {
        var $ = layui.jquery

        // 计算登陆框的位置，使其垂直居中
        var setLoginBoxPosition = function () {
            var loginHeight = $('#login').height()
            var windowHeight = $(window).height()

            $('#login').css({
                'margin-top': (windowHeight - loginHeight) / 2
            })
        }
        // 初始化位置
        setLoginBoxPosition()
        // 屏幕尺寸改变时触发
        $(window).resize(function () {
            setLoginBoxPosition()
        })

        // 登陆
        $('#submit').on('click', function () {
            var _this = $(this)
            // 添加按钮禁用
            $(this).addClass('layui-btn-disabled')

            setTimeout(function () {
                // 删除按钮的禁用
                _this.removeClass('layui-btn-disabled')
            }, 2000)

            // 就可以发送Ajax了
        })
    })
</script>

</html>
